<template>
    <div class="quiz">
        <el-button type="primary" size="small" @click="exportFile()">导出</el-button>
        <el-table v-loading="loading" :data="tableData" border stripe style="width: 60%">
            <el-table-column type="index" label="序号" width="150"></el-table-column>
            <el-table-column prop="userName" label="学生姓名" width="150"></el-table-column>
            <el-table-column prop="quizTitle" label="实验名称" width="150"></el-table-column>
            <el-table-column prop="totalScore" label="分数" width="150"></el-table-column>
        </el-table>
        <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[5, 10, 50, 100]"
        :page-size="param.pageSize"
        layout="total, prev, pager, next"
        :total="total">
        </el-pagination>
    </div>
</template>

<script>
    export default {
    data() {
        return {
            loading: false,
            tableData: [],
            total: 0,
            param: {
                pageSize: 5,
                pageNo: 1
            },
            dialogFormVisible: false,
            form: {},
            formLabelWidth: '120px'
    
        }
    },
    created() {
        
    },
    mounted() {
        this.getByPage()
    },
    methods: {
        getByPage() {
            let url = '/userQuiz/getByPageCustom'
            this.loading = true
            this.$http.post(url,this.param).then(data => {
                this.loading = false
                debugger
                if (data.data.success === true) {
                    // localStorage.username = data.data.userName;
                    this.tableData = data.data.data.records
                    this.total = data.data.data.total
                } else {
                    this.$message.error(data.message);
                }
            }).catch(() => {
                this.loading = false
            })
        },
        // TODO 跳转详情
        handleClick(row) {
            this.form = row
            this.dialogFormVisible = true
            this.$forceUpdate()
        },
        updateScore() {
            this.$http.post("/conclusion/updateScore?id=" + this.form.id + "&score=" + this.form.score, {}, {}).then(({body}) => {
                if (body.success === true) {
                    this.getByPage();
                    this.$message.success(body.message);
                    window.location.reload();
                } else {
                    this.$message.error(body.message);
                }
            }).catch(() => {
                this.$message.error('删除失败');
            })
            this.dialogFormVisible = false
        },
        exportFile() {
                this.$http.post("/userQuiz/exportExcel", this.param, {}).then(({body}) => {
                    console.log("body" + JSON.stringify(body));

                if (body.success === true) {
                    this.$message.success("导出成功");
                    
                    window.open('localhost:8083' + '/files/' + body.data)
                } else {
                    this.$message.error(body.message);
                }
            }).catch(() => {
                this.$message.error('导出失败');
            })
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.getByPage()
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.getByPage()
        }
    }
}
</script>

<style>
.quiz {
    padding: 10px 10px;
    background: #fff;
}
</style>
